<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Icons } from '@/constants'
import type { ResData } from '@/typings/request'
import { JBoltApi } from '@/utils/request'
import type { Model } from '@/typings/api'
import JbCrudPage from '@/components/_builtin/jb-crud-page/index.vue'
import RoleEdit from './components/role-edit/index.vue'
import RoleUser from './components/role-user/index.vue'
import RolePermissions from './components/role-permissions/index.vue'
import type { VxeTableInstance } from 'vxe-table'

const pageRef = ref<InstanceType<typeof JbCrudPage> | null>(null)
const tableRef = ref<VxeTableInstance<Model>>()
// /* 主表相关 start */
const tableData = ref<Model[]>([])
const loading = ref<boolean>(false)
async function loadTreeData() {
    if (loading.value) return
    loading.value = true
    const { result } = await JBoltApi.get<ResData<Model[]>>(`/api/admin/role/datas`)
    loading.value = false
    tableData.value = result.data!
}

onMounted(() => {
    loadTreeData()
})
/* 主表相关 end */
</script>
<template>
    <jb-crud-page ref="pageRef" :edit-component="RoleEdit" @after-submit="loadTreeData()">
        <template #title>
            <jb-icon class="inline text-20px" icon="carbon:user-role"></jb-icon>
            <span class="ml-10px">角色管理</span>
            <jb-btn
                :icon="Icons.EXPAND"
                text
                class="ml-24px"
                type="success"
                @click="tableRef?.setAllTreeExpand(true)"
            >
                展开
            </jb-btn>
            <n-divider vertical />
            <jb-btn
                :icon="Icons.SHRINK"
                text
                type="warning"
                @click="tableRef?.clearTreeExpand()"
            >
                收起
            </jb-btn>
        </template>
        <template #conditions>
            <span></span>
        </template>
        <template #opt>
            <n-button-group>
                <jb-btn
                    :icon="Icons.ADD"
                    type="primary"
                    ghost
                    @click="pageRef?.showEditModal('添加角色')"
                >
                    新增
                </jb-btn>
                <jb-btn
                    :icon="Icons.REFRESH"
                    type="warning"
                    ghost
                    @click="loadTreeData()"
                >
                    刷新
                </jb-btn>
            </n-button-group>
        </template>
        <jb-table
            ref="tableRef"
            :tree-config="{ childrenField: 'items' }"
            :row-config="{
                keyField: 'id',
                useKey: true
            }"
            :loading="loading"
            :column-config="{ useKey: true, resizable: true }"
            :data="tableData"
        >
            >
            <jb-column
                align="left"
                header-align="center"
                field="name"
                title="角色"
                tree-node
                width="300"
            ></jb-column>
            <jb-column field="sn" title="编码" width="200"></jb-column>
            <jb-column title="操作" width="240" fixed="right">
                <template #default="{ row }">
                    <jb-btn
                        tip-text="添加子角色"
                        :icon="Icons.ADD"
                        circle
                        size="small"
                        secondary
                        class="mx-8px"
                        type="primary"
                        @click="
                            pageRef?.showEditModal(`添加[${row.name}]下子角色`, {
                                pid: row.id
                            })
                        "
                    ></jb-btn>
                    <jb-btn
                        tip-text="编辑"
                        :icon="Icons.EDIT"
                        type="warning"
                        secondary
                        size="small"
                        circle
                        @click="
                            pageRef?.showEditModal('修改角色', {
                                id: row.id,
                                pid: row.pid
                            })
                        "
                    ></jb-btn>
                    <jb-btn
                        tip-text="删除"
                        confirm-text="确认删除该角色吗？"
                        :url="`/api/admin/role/delete/${row.id}`"
                        :icon="Icons.DELETE"
                        secondary
                        class="mx-8px"
                        type="error"
                        circle
                        size="small"
                        @success="loadTreeData()"
                    ></jb-btn>
                    <jb-btn
                        :icon="Icons.SETTING"
                        circle
                        :tip-text="`${row.name}-设置权限`"
                        :drawer-component="RolePermissions"
                        :drawer-title="`${row.name}-设置权限`"
                        drawer-positive-text=""
                        secondary
                        size="small"
                        :drawer-component-props="{ roleId: row.id }"
                        :drawer-args="{
                            negativeText: '关闭',
                            defaultWidth: '1400',
                            resizable: true
                        }"
                    >
                    </jb-btn>
                    <jb-btn
                        :icon="Icons.USERS"
                        circle
                        secondary
                        class="mx-8px"
                        :tip-text="`${row.name}-用户列表`"
                        :drawer-component="RoleUser"
                        :drawer-title="`${row.name}-用户列表`"
                        drawer-positive-text=""
                        size="small"
                        :drawer-component-props="{ roleId: row.id }"
                        :drawer-args="{
                            negativeText: '关闭',
                            defaultWidth: '1400',
                            resizable: true
                        }"
                    >
                    </jb-btn>
                </template>
            </jb-column>
        </jb-table>
    </jb-crud-page>
</template>

<style scoped></style>
